/**
 * @file _axiom-notification.scss
 * @description 通知组件样式定义
 */

// [最终修复] 为 Provider 容器设置顶层堆叠上下文
.axiom-notification-provider {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999; // 确保在所有元素之上，包括对话框
  pointer-events: none; // 允许鼠标事件穿透容器
}


.axiom-notification {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--axiom-notification-gap);
  padding: var(--axiom-notification-padding);
  background-color: var(--axiom-notification-bg);
  border: var(--axiom-notification-border);
  border-radius: var(--axiom-notification-border-radius);
  box-shadow: var(--axiom-notification-shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: var(--axiom-notification-min-width);
  max-width: var(--axiom-notification-max-width);
  pointer-events: auto; // [最终修复] 恢复通知本身的鼠标事件

  &:hover {
    transform: var(--axiom-notification-hover-transform);
    box-shadow: var(--axiom-notification-hover-shadow);
  }

  // 图标区域
  .axiom-notification__icon {
    flex-shrink: 0;
    width: var(--axiom-notification-icon-size);
    height: var(--axiom-notification-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--axiom-notification-icon-font-size);
  }

  // 内容区域
  .axiom-notification__content {
    flex: 1;
    min-width: 0;
  }

  .axiom-notification__title {
    font-size: var(--axiom-notification-title-size);
    font-weight: var(--axiom-notification-title-weight);
    line-height: 1.4;
    margin-bottom: var(--axiom-notification-title-margin-bottom);
    color: var(--axiom-text-color);
  }

  .axiom-notification__message {
    font-size: var(--axiom-notification-message-size);
    line-height: 1.5;
    color: var(--axiom-text-color-secondary);
    word-wrap: break-word;
  }

  // 关闭按钮
  .axiom-notification__close {
    position: absolute;
    top: var(--axiom-notification-close-button-top);
    right: var(--axiom-notification-close-button-right);
    width: var(--axiom-notification-close-button-size);
    height: var(--axiom-notification-close-button-size);
    border: none;
    background: none;
    color: var(--axiom-notification-close-button-color);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--axiom-notification-close-button-font-size);

    &:hover {
      background-color: var(--axiom-notification-close-button-hover-bg);
      color: var(--axiom-notification-close-button-hover-color);
      transform: scale(1.1);
    }
  }

  // 类型样式
  &.axiom-notification--success {
    border-left: var(--axiom-notification-type-border-width) solid var(--axiom-success-color);
    
    .axiom-notification__icon {
      color: var(--axiom-success-color);
    }
  }

  &.axiom-notification--warning {
    border-left: var(--axiom-notification-type-border-width) solid var(--axiom-warning-color);
    
    .axiom-notification__icon {
      color: var(--axiom-warning-color);
    }
  }

  &.axiom-notification--info {
    border-left: var(--axiom-notification-type-border-width) solid var(--axiom-primary-color);
    
    .axiom-notification__icon {
      color: var(--axiom-primary-color);
    }
  }

  &.axiom-notification--error {
    border-left: var(--axiom-notification-type-border-width) solid var(--axiom-danger-color);
    
    .axiom-notification__icon {
      color: var(--axiom-danger-color);
    }
  }
}

// 动画
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(100%);
}